<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ选择器</title>
</head>
<body>
    <div><br>===========基本选择器测试============<br></div>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
    <div><br>===========层级选择器测试============<br></div>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>

    <div></div>
    <p>p1</p>
    <p>p2</p>

    <div><br>==========属性选择器测试=============<br></div>
    <input type="text">
    <input type="password">
    <input type="password">

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    /*
        基本选择器
     */
    //元素选择器
    let divs = $("div");
    // alert(divs.length);

    //id选择器
    let div1 = $("#div1");
    // alert(div1.length);

    //类选择器
    let cls = $(".cls");
    //alert(cls.length);


    /*
        层级选择器
    */
    //后代选择器 包含后代的后代
    let divs1 = $("div span");
    //alert(divs1.length);

    //子选择器 只包含子级
    let divs2 = $("div > span");
    //alert(divs2.length);

    //兄弟选择器 取得同级相邻的下一个
    let ps = $("div + p");
    //alert(ps.html());

    //兄弟选择器 取得同级相邻的所有
    let pss = $("div ~ p");
    //alert(pss.length);


    /*
        属性选择器
    */
    //属性选择器
    let inputs = $("input[type]");
    //alert(inputs.length);

    //属性值选择器
    let input = $("input[type='password']");
    //alert(input.length);




</script>
</html>